<template>
  <div>
      <comment-header>话题</comment-header>
      <div class="box" v-for="(item,index) in contentList" :key="index">
          <div class="smallbox">
               <h4 class="headline" v-text="item.title"></h4>
               <div class="box_image" v-if="item.picture != '' || item.picture1 != '' ||item.picture2 != ''">
                   <img :src="item.picture" alt="">
                   <img :src="item.picture1" alt="">
                   <img :src="item.picture2" alt="">
               </div>
               <div class="box_bottom" v-text="item.intro"></div>
          </div>
      </div>
  </div>
</template>

<script>
import commentHeader from "../../components/comment/commentHeader"

  export default {
  components:{
    commentHeader     
  },
    data(){
        return{
            page:1,
             contentList:[],
           loadingMore: false
        }
    },
     mounted(){
        this.topicContent();
         window.onscroll = this.didscroll;
    },
    methods:{
        topicContent:function(){
            var that = this
            this.$http.get('/pet/v2/topiclist?page='+this.page+'').then(function(data){
                console.log(data)
                that.contentList = data.body.data.list
            })
        },
         didscroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      var contentHeight = document.body.clientHeight;
      var windowHeight = window.innerHeight;
      if (scrollTop + windowHeight > contentHeight - 60) {
        if (this.loadingMore == false) {
          this.loadMore();
        }
      }
    },
    loadMore() {
      this.loadingMore = true;
      this.page += 1;
      var that = this;
      var url = "/pet/v2/questionlist?page=" + this.page + "&tag_id=0";
      this.$http.get(url).then(function(data) {
        that.contentList = that.contentList.concat(data.body.data.list);
        that.loadingMore = false;
      });
    }
    }
  }
</script>

<style scoped>
    *{
        background-color: white;
    }
    .smallbox{
        width: 90vw;
        border-bottom:1px solid #f1f1f1;
        margin: 0 auto;
        padding-bottom: 3vw;
    }
    .box_image>img{
        width: 26vw;
        height: 26vw;
        margin: 1vw;
    }
    .box_image img:nth-child(1){
        margin-left: 0;
    }
    .headline{
        margin: 2vw 0 2vw;
    }
    .box_bottom{
        font-size: 3.8vw;
        line-height: 6vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #757575;
    }
</style>